<template>
  <div>
    <el-form :inline="true" :model="selectData" class="demo-form-inline">
      <el-form-item label="标题">
        <el-input v-model="selectData.title" placeholder="请输入关键字" />
      </el-form-item>
      <el-form-item label="详情">
        <el-input v-model="selectData.introduce" placeholder="请输入关键字" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="showedDataList.compDataList" style="width: 100%">
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      />
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="selectData.count * 2"
      @current-change="currentChange"
      @size-change="sizeChange"
    />
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  onMounted,
} from "vue";
import { getGoodsList } from "../request/api";
import { InitData, ListInt } from "../type/goods";
export default defineComponent({
  setup() {
    const data = reactive(new InitData());
    onMounted(() => {
      getGoods()
    });
    
    const columns = [
      { label: "id", prop: "id", width: "50px" },
      { label: "标题", prop: "title", width: "100px" },
      { label: "详情", prop: "introduce" },
    ];
    // 计算属性, 切割出实际上需要展示的数据
    const showedDataList = reactive({
      compDataList: computed(() => {
        return data.list.slice(
          (data.selectData.page - 1) * data.selectData.pagesize,
          data.selectData.page * data.selectData.pagesize
        );
      }),
    });
    // watch监听输入框的两个属性,第一个参数是数组，并且需要使用箭头函数
    watch(
      [() => data.selectData.title, () => data.selectData.introduce],
      () => {
        if (data.selectData.title === "" && data.selectData.introduce === "") {
         getGoods()
        }
      }
    );
    const onSubmit = () => {
      let arr: ListInt[] = [];
      if (data.selectData.title || data.selectData.introduce) {
        if (data.selectData.title) {
          arr = data.list.filter(
            (item) => item.title.indexOf(data.selectData.title) !== -1
          );
        }
        if (data.selectData.introduce) {
          arr = data.list.filter(
            (item) => item.introduce.indexOf(data.selectData.introduce) !== -1
          );
        }
      } else {
        arr = data.list;
      }
      console.log(arr, "111");

      data.selectData.count = arr.length;
      data.list = arr;
    };
    const currentChange = (page: number) => {
      data.selectData.page = page;
    };
    const sizeChange = (pagesize: number) => {
      data.selectData.pagesize = pagesize;
    };
    const getGoods = () => {
      getGoodsList().then((res) => {
        if (res.code == 200) {
          data.list = res.data;
          data.selectData.count = res.data.length;
        }
      });
    };

    return {
      ...toRefs(data),
      columns,
      showedDataList,
      currentChange,
      sizeChange,
      onSubmit,
    };
  },
});
</script>

<style scoped>
</style>